<script setup>
	import {
		ElButton,
		ElInput,
		ElTable,
		ElTableColumn,
		ElMessage,
		ElMessageBox,
		// UploadProps
	} from "element-plus"
	import {
		onMounted,
		reactive,
		ref,
		shallowRef,
		watchEffect,
		watchSyncEffect
	} from "vue"
	import {
		getAllAdmin,
		searchAdmin,
		addAdmin,
		lockAdmin,
		editAdmin,
		getRoleList
	} from "../api"
	import {
		baseUrl,
		uploadUrl
	} from "@/utils/request";
	import {
		Plus
	} from '@element-plus/icons-vue'
	import Header from "@/components/Header.vue"
	import router from "@/router";

	//表格中的数据
	let tableData = ref([])
	
	let pageIndex = ref(1);
	let pageSize = 4;
	let total = ref(0)
	const adminList = async () => {
		let res = await getAllAdmin({
			pageIndex: pageIndex.value,
			pageSize: pageSize
		})
		tableData.value = res.adminList;
		// console.log("res......",res)
		total.value = res.pageCount
	}
	onMounted(() => {
		adminList()
	})


	//搜索
	let data2 = reactive({
		pageIndex: pageIndex,
		pageSize: pageSize,
		adminAccount: ""
	})
	const searchDom = ref(null)
	const nullArry = [];
	const search = async () => {
		//Object.assign(tableData,nullArry)
		// console.log("tableData1",tableData)
		if(data2.adminAccount == ""){
			delete data2.adminAccount
		}
		let res = await searchAdmin(data2)
		tableData.value = res.adminList
		total.value = res.pageCount
		// console.log("tableData2", tableData.value)
	
	}
	//添加管理员

	let roleOption = [

	]
	const dialogFormVisible = ref(false)
	const formLabelWidth = '140px'
	const radio1 = ref(0)
	const form = reactive({
		account: '',
		name: "",
		roleId: '',
		date1: '',
		date2: '',
		delivery: false,
		type: [],
		resource: '',
		desc: '',
		comfirmPwd: "",
		pwd: "",
		img: ""
	})
	const cancel = () => {
		dialogFormVisible.value = false
	}
	const add = async () => {
		// console.log("add....", radio1.value)
		dialogFormVisible.value = false;
		if (form.pwd == form.comfirmPwd) {
			let data = {
				siteId: 1,
				adminAccount: form.account, //账号
				adminImage: form.img,
				adminName: form.name,
				adminPassword: form.pwd,
				roleId: form.roleId,
				adminStatus: radio1.value
			}
			if(!form.account){
				ElMessage({
					message: '请输入账号',
					type: 'warning',
				})
			}else if(!form.name){
				ElMessage({
					message: '请输入姓名',
					type: 'warning',
				})
			}else if(!form.pwd){
				ElMessage({
					message: '请输入密码',
					type: 'warning',
				})
			}else{
				let res = await addAdmin(data)
				adminList()
				ElMessage({
					message: '添加成功',
					type: 'success',
				})
			}
		} else {
			ElMessage.error('添加失败.')
		}

	}
	//重置

	const reset = () => {
		data2.adminAccount = null;
		adminList()
	}
	//锁定
	const Visible = ref(false)
	const lock = (item) => {
		if (item.adminAccount == "admin") {
			ElMessage.error('超级管理员不可被锁定')
		} else {
			Visible.value = true
			sessionStorage.setItem("lockAdminId", item.adminId)
			// console.log(item.adminId)
		}
		// console.log("1111111111111111111111111",item.adminAccount)
	}
	const confrimLock = async () => {
		Visible.value = false
		let data = {
			adminId: sessionStorage.getItem("lockAdminId")
		}
		let res = await lockAdmin(data)
		adminList()
		ElMessage({
			message: '修改成功',
			type: 'success',
		})
	}
	//编辑
	const Visible2 = ref(false)
	const value = ref('角色')
	const radio2 = ref("0")
	let options = [
	
	]
	onMounted(async () => {
		let res = await getRoleList({
			pageIndex: 1,
			pageSize: 100,
			siteId: 1
		});
		options = res.list
		roleOption = res.list
	})
	
	
	// 添加管理员的图片上传
	const imageUrl = ref('')
	// const uploadUrl = ""
	const handleAvatarSuccess = (response, uploadFile) => {
		// console.log('上传成功', response)
		// console.log('uploadFile', response)
		imageUrl.value = URL.createObjectURL(uploadFile.raw)
		//imageUrl.value=baseUrl+"manager/"+response.data
		form.img = response.data
	}

	const beforeAvatarUpload = (rawFile) => {
		console.log(rawFile)
		let reg = /(jpg|png|jpeg)$/
		if (!reg.test(rawFile.type)) {
			ElMessage.error('图片只能是jpg/jpeg/png格式的')
			return false
		} else if (rawFile.size / 1024 / 1024 > 4) {
			ElMessage.error('图片的大小不能超过4MB')
			return false
		}
		return true
	}
	
	//编辑
	
	let myItem = reactive({
		roleId:"",
		adminImage:""
	})
	let thisAccount = ref(null)
	const editAdminFn = (item) => {
		if (item.adminAccount != "admin") {
			Visible2.value = true
			// console.log("Visible2.value", Visible2.value)
			myItem = item

		} else {
			Visible2.value = false
			myItem = item
			ElMessage.error('超级管理员信息不可被修改')

		}
	}
	// 编辑管理员的图片上传
	const imageUrl2 = ref('')
	const handleAvatarSuccess2 = (response, uploadFile) => {
		// console.log('上传成功', response)
		// console.log('uploadFile', response)
		imageUrl2.value = URL.createObjectURL(uploadFile.raw)
		//imageUrl.value=baseUrl+"manager/"+response.data
		myItem.adminImage = response.data
	}
	
	const beforeAvatarUpload2 = (rawFile) => {
		// console.log(rawFile)
		let reg = /(jpg|png|jpeg)$/
		if (!reg.test(rawFile.type)) {
			ElMessage.error('图片只能是jpg/jpeg/png格式的')
			return false
		} else if (rawFile.size / 1024 / 1024 > 4) {
			ElMessage.error('图片的大小不能超过4MB')
			return false
		}
		return true
	}
	
	// 提交编辑管理员接口
	
	const edit = async () => {
		Visible2.value = false
		let data3 = {
			adminId: myItem.adminId,
			adminAccount: myItem.adminAccount,
			adminImage: myItem.adminImage,
			adminName: myItem.adminName,
			adminStatus: radio2.value,
			roleId:myItem.roleId
		}
		if(!myItem.adminName){
			ElMessage({
				message: '请输入姓名',
				type: 'warning',
			})
		}else if(!myItem.roleId){
			ElMessage({
				message: '请输入选择角色',
				type: 'warning',
			})
		}else if(!radio2.value){
			ElMessage({
				message: '请选择状态',
				type: 'warning',
			})
		}else{
			// console.log(data3)
			let res = await editAdmin(data3);
			console.log(res)
			adminList()
			ElMessage({
				message: '修改成功',
				type: 'success',
			})
		}
		
	}
	//点击分页器

	const changePage = (page) => {
		pageIndex.value = page;
		search()
	}
</script>
<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-main>
				<div class="box">
					<div class="title headTitile" style="margin-bottom: 30px;">
						<h3 style="display: inline-block;">管理员</h3>
						<el-button plain type="primary" @click="dialogFormVisible = true">
							添加管理员
						</el-button>
					</div>
					<div class="header" style=" display: flex;">
						<div style="width: 260px; display: flex;justify-content: space-between;">
							<span style="color:#333">账号</span>
							<el-input v-model="data2.adminAccount" ref="searchDom"
								style="width: 210px;height: 30px;margin-left: ;" placeholder="请输入账号" />
						</div>
						<div style="margin-left: 20px;">
							<el-button type="primary" @click="search">搜索</el-button>
							<el-button @click="reset">重置</el-button>

						</div>
						
						<!-- 添加管理员 el-dialog-->
						<el-dialog v-model="dialogFormVisible" title="添加管理员" width="500">
							<el-form :model="form">
								<el-form-item label="账号" :label-width="formLabelWidth">
									<el-input v-model="form.account" autocomplete="off" placeholder="请输入账号" style="width: 200px;"/>
								</el-form-item>
								<el-form-item label="头像" :label-width="formLabelWidth">
									<el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
										:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
										style="display: inline-block;margin-top: 20px;">
										<img v-if="imageUrl" :src="imageUrl" class="avatar" />
										<el-icon v-else class="avatar-uploader-icon"
											style=" width: 150px;height: 150px;">
											<Plus />
										</el-icon>
									</el-upload>
								</el-form-item>
								<el-form-item label="姓名" :label-width="formLabelWidth">
									<el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名" style="width: 200px;"/>
								</el-form-item>
								<el-form-item label="密码" :label-width="formLabelWidth">
									<el-input v-model="form.pwd" autocomplete="off" placeholder="请输入密码" show-password
										type="password"  style="width: 200px;"/>
								</el-form-item>
								<el-form-item label="确认密码" :label-width="formLabelWidth">
									<el-input v-model="form.comfirmPwd" autocomplete="off" placeholder="请再次确认密码" show-password
										type="password"  style="width: 200px;"/>
								</el-form-item>
								<el-form-item label="角色" :label-width="formLabelWidth">
									<el-select v-model="form.roleId" placeholder="请选择角色" size="default"
										style="width: 200px">
										<el-option v-for="item in roleOption" :key="item.roleId" :label="item.roleName"
											:value="item.roleId" />
									</el-select>
								</el-form-item>
								<el-form-item label="用户状态" :label-width="formLabelWidth">
									<el-radio-group v-model="radio1" class="ml-4">
										<el-radio value="0" size="large">正常</el-radio>
										<el-radio value="1" size="large">锁定</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-form>
							<template #footer>
								<div class="dialog-footer">
									<el-button @click="cancel">取消</el-button>
									<el-button type="primary" @click="add">
										确认
									</el-button>
								</div>
							</template>
						</el-dialog>
					</div>
					<div class="table">
						<el-table :data="tableData" style="width: 100%" height="51vh">
							<el-table-column prop="siteName" label="站点" />
							<el-table-column prop="adminAccount" label="账号" />
							<el-table-column prop="adminName" label="姓名" />
							<el-table-column prop="roleName" label="角色" />
							<el-table-column prop="adminStatus" label="用户状态" />
							<el-table-column prop="lastTime" label="最后登录时间" />
							<el-table-column prop="adminIp" label="最后登录IP" />
							<el-table-column label="操作">
								<template #default="scope">
									<el-button link :disabled="scope.row.adminAccount=='admin' ? true : false" size="small"
										@click="editAdminFn(scope.row)" ref="thisAccount">
										编辑
									</el-button>
									<el-button link :disabled="scope.row.adminAccount=='admin' ? true : false" size="small"
										 @click="lock(scope.row)">
										锁定
									</el-button>

								</template>
							</el-table-column>
						</el-table>
						<el-pagination layout="prev,pager,next" :page-count="total" :page-size="pageSize"
							v-model:current-page="pageIndex" @current-change="changePage"></el-pagination>
					</div>
					<!-- 编辑管理员 -->
					<el-dialog v-model="Visible2" title="编辑管理员" :modal=true width="500"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<span>账号&nbsp;&nbsp;&nbsp;<el-input v-model="myItem.adminAccount" style="width: 240px;"
								disabled></el-input></span>
						<br />
						<span>头像&nbsp;&nbsp;&nbsp;
							<el-upload class="avatar-uploader"  :show-file-list="false"
								:on-success="handleAvatarSuccess2" :action="uploadUrl" :before-upload="beforeAvatarUpload2"
								style="display: inline-block;margin-top: 20px;">
								<img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
								<el-icon v-else class="avatar-uploader-icon" style=" width: 150px;height: 150px;">
									<Plus />
								</el-icon>
							</el-upload>
						</span>
						<br />
						<span>姓名&nbsp;&nbsp;&nbsp;&nbsp;<el-input v-model="myItem.adminName" placeholder="账号"
								style="width: 240px;margin-top: 20px;"></el-input></span>
						<br />
						<span>角色&nbsp;&nbsp;&nbsp;
							<el-select v-model="myItem.roleId" placeholder="请选择角色"
								style="width: 240px;;margin-top: 20px;">
								<el-option v-for="item in options" :key="item.roleId" :label="item.roleName"
									:value="item.roleId" />
							</el-select>
						</span>
						<br />
						<span>
							用户状态
						</span>
						<span>
							<el-radio-group v-model="radio2" class="ml-4">
								<el-radio value="0" size="large">正常</el-radio>
								<el-radio value="1" size="large">锁定</el-radio>
							</el-radio-group>
						</span>
						<br />
						<template #footer>
							<div class="dialog-footer">
								<el-button @click="Visible2 = false">取消</el-button>
								<el-button type="primary" @click="edit">
									确定
								</el-button>
							</div>
						</template>
					</el-dialog>
					<!-- 锁定 -->
					<el-dialog v-model="Visible" title="提示" width="500">
						<span>确定要锁定该管理员吗</span>
						<template #footer>
							<div class="dialog-footer">
								<el-button @click="Visible = false">取消</el-button>
								<el-button type="primary" @click="confrimLock">
									确定
								</el-button>
							</div>
						</template>
					</el-dialog>

				</div>
			</el-main>
		</el-container>
	</div>


</template>

<style lang="less" scoped>
	.box {
		width: 100%;
		// border:1px solid red;
		padding: 20px;
		box-sizing: border-box;
		.headTitile{
			display: flex;
			justify-content: space-between;
		}
		
	}

	.common-layout {
		background: #f2f3f5;

		.el-header {
			padding: 0 !important;
			height: 10vh;
		}

		.el-main {
			height: 86vh;
			padding: 0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	
</style>
<style>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
	.el-table .cell{
		.el-button{
			color: #4b5db9;
		}
	}
</style>